<template>
  <el-container class="app el-list">
    <el-main class="el-list-main" style="padding: 5px;">
      <ul>
        <li v-for="(ele,index) in page.content" :ref="'ele'+index" :key="index" @click.stop="handleClick(ele,index)">{{ele.name}}</li>
      </ul>
    </el-main>
    <el-footer class="el-list-foot" height="30px">
      <el-pagination
        style="text-align: right;"
        :small="true"
        @current-change="handleCurrentChange"
        :current-page="page.number+1"
        :page-size="page.size"
        layout="pager"
        :total="page.totalElements"
      />
    </el-footer>
  </el-container>
</template>

<script>
export default {
  props: {
    page: {}
  },
  data() {
    return {
      activeNode: undefined,
      activeIndex: undefined
    };
  },
  watch: {
    page: {
      handler: function() {
        this.clear();
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    clear() {
      if (this.activeNode != undefined) {
        this.activeNode.classList.remove("el-list-active");
      }
      this.activeNode = undefined;
      this.activeIndex = undefined;
    },
    handleClick(data, index) {
      if (this.activeIndex == index) return;
      if (this.activeNode != undefined) {
        this.activeNode.classList.remove("el-list-active");
      }
      this.activeIndex = index;
      this.activeNode = this.$refs["ele" + index][0];
      this.activeNode.classList.add("el-list-active");
      this.$emit("item-click", data);
    },
    handleCurrentChange(data) {
      this.$emit("current-change", data);
    }
  }
};
</script>
<style lang="less">
.el-list {
  .el-list-main {
    padding: 5px;
    ul {
      border-top: 1px solid #ebeef5;
      li {
        padding: 10px;
        border-bottom: 1px solid #ebeef5;
        list-style: none;
        cursor: pointer;
        &:hover {
          background-color: #ebf2f9;
        }
        &.el-list-active {
          background-color: #ebf2f9;
        }
      }
    }
  }
  .el-list-foot {
    padding: 0;
    border-collapse: collapse;
    border-top: 1px solid #ebeef5;
  }
}
</style>
